<template>
  <div class="choose">
    <comp-tittle>
        <template>
            <h4>快速选择</h4>
        </template>
    </comp-tittle>
    <div class="scroll">
      <ul>
      <li v-for="item in choose" :key="item.id">
        <router-link to="/">
          <div>
            <img :src="item.pic" :οnerrοr="default_src" />
            <p>{{ item.cate_name }}</p>
          </div>
        </router-link>
      </li>
    </ul>
    </div>
  </div>
</template>

<script>
import compTittle from '@/components/compTittle.vue'
export default {
  props: {
    choose: {
      type: Array,
    },
  },
  components:{
      "comp-tittle":compTittle
  },
  data() {
    return {
      default_src: 'onerror=this.src="' + require("@/assets/image/error.png"),
    };
  },
};
</script>

<style lang="scss" scoped>
.scroll{
  overflow: hidden;
   height: 150px;
}
.choose {
  padding: 0 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  
  ul {
    display: flex;
    overflow-x: scroll;
    padding-bottom: 60px;
   
    li {
      width: 100px;
      border: 1px solid #eee;
      margin-right: 10px;
      padding-bottom: 10px;
      box-sizing: border-box;
      a {
        display: block;
        width: 100px;
        > div {
          width: 100px;

          img {
            height: 100px;
          }
          p {
            font-size: 14px;
            text-align: center;
          }
        }
      }
      &:nth-child(3n-2) {
        border-bottom: 2px solid green;
      }
      &:nth-child(3n-1) {
        border-bottom: 2px solid blue;
      }
      &:nth-child(3n) {
        border-bottom: 2px solid orange;
      }
    }
  }
}
</style>